<template>  
  <el-card class="profile-card">  
    <div class="profile-header">  
      <el-avatar v-if="data.path" :size="150" :src="baseImg + data.path" class="avatar"></el-avatar>
      <div class="user-info">  
        <h2>{{ data.userName }}</h2>  
        <el-tag :type="data.status ? 'success' : 'danger'">  
          {{ data.status ? '启用' : '禁用' }}  
        </el-tag>  
      </div>  
    </div>  

    <el-divider></el-divider>  

    <el-form label-width="120px" class="detail-form">  
      <el-row :gutter="20">  
        <el-col :span="12">  
          <el-form-item label="用户ID：">  
            <span>{{ data.userID }}</span>  
          </el-form-item>  
          
          <el-form-item label="登录账号：">  
            <span>{{ data.loginName }}</span>  
          </el-form-item>  

          <el-form-item label="手机号码：">  
            <span>{{ data.phone }}</span>  
          </el-form-item>  

          <el-form-item label="性别：">  
            <span>{{ data.sex }}</span>  
          </el-form-item>  
        </el-col>  

        <el-col :span="12">  
          <el-form-item label="所属部门：">  
            <span>{{ data.deptName }}</span>  
          </el-form-item>  

          <el-form-item label="用户角色：">  
            <span>{{ data.roleName }}</span>  
          </el-form-item>  

          <el-form-item label="最后更新时间：">  
            <span>{{ data.lastTime | dateFormat }}</span>  
          </el-form-item>  

          <el-form-item label="备注：">  
            <span>{{ data.remark || '无' }}</span>  
          </el-form-item>  
        </el-col>  
      </el-row>  

      <el-form-item label="头像信息：">  
        <div class="img-info">  
          <span>文件类型：{{ data.extension }}</span>  
          <span style="margin-left: 20px">文件大小：{{ data.size | sizeFormat }}</span>  
        </div>  
      </el-form-item>  
    </el-form>  
  </el-card>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      baseImg: 'http://localhost:52061/', 
      data: {  
    
      }   
    }  
  },  
  mounted() {  
    console.log(this.data); // Check if data is correctly populated  
  }  ,
  methods: {
    show() {
            this.axios({
                method: "get",
                url: "Users/"+sessionStorage.getItem("UserId")
            })
                .then(res => {
                    console.log(res.data.data[0])
                    this.data=res.data.data[0]
                })
                .catch(err => {
                    console.error("请求失败:", err);
                    alert("请求失败!!!");
                });
        },
  },created(){
    this.show();
  }
}  
</script>  

<style scoped>  
.profile-card {  
  max-width: 800px;  
  margin: 20px auto;  
}  

.profile-header {  
  display: flex;  
  align-items: center;  
  padding: 20px;  
}  

.avatar {  
  margin-right: 40px;  
}  

.user-info h2 {  
  margin: 0 0 10px 0;  
}  

.detail-form {  
  padding: 0 20px;  
}  

.img-info {  
  color: #666;  
  font-size: 14px;  
}  
</style>  